import useUserList from "@/hooks/getUserList.js";

import {useEffect, useRef} from "react";
import * as echarts from "echarts";

const PieCharts = ({data}) => {
    const chartRef = useRef(null);
    // 页面渲染完成后执行
    useEffect(() => {
        // 保证dom可用，在进行图表渲染
        // 1. 链接dom节点
        // 2. 初始化echarts实例
        const myChart = echarts.init(chartRef.current);
        // 3. 准备图标参数
        const option = {
            title: {
                text: '用户地域分布',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            series: [
                {
                    name: '用户来自于',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 30,
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: data
                }
            ]
        }

        // 4. 使用图表配置项渲染图表
        option && myChart.setOption(option);
    }, [data])


    return (
        <div ref={chartRef} style={{width: '400px', height: '400px'}}></div>
    )
}

export default PieCharts